<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>本地存储</title>
</head>
<body>
<fieldset>
<div style="text-align:center">



    <tr>  <H2>用户登入信息</H2> </div>

        <table>



        <td><label for="sitename">用户名(key)：</label></td><td>
        <input type="text" id="sitename" name="sitename"  required><span style="color:red">*</span>
    </td></tr>
    <tr>
        <td><label for="siteurl">密码(value)：</label></td><td>
        <input type="password" id="siteurl" name="siteurl" required><span style="color:red">*</span>
    </td></tr></table>
<div style="text-align:center">

    <div style="text-align:center"><input type="button" onclick="save()" value="登入"/>
        <input type="reset" name="button" value="重置"></div><a href="login.html">注册</a>
</div></fieldset>





<script>
    // 载入所有存储在localStorage的数据
    loadAll();

    //保存数据
    function save(){

        var siteurl = document.getElementById("siteurl").value;
        var sitename = document.getElementById("sitename").value;
        localStorage.setItem(sitename, siteurl);
        alert("登入成功");
    }

    //将所有存储在localStorage中的对象提取出来，并展现到界面上
    function loadAll(){
        var list = document.getElementById("list");
        if(localStorage.length>0){
            var result = "<table border='1'>";
            result += "<tr><td>key</td><td>value</td></tr>";
            for(var i=0;i<localStorage.length;i++){
                var sitename = localStorage.key(i);
                var siteurl = localStorage.getItem(sitename);
                result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
            }
            result += "</table>";
            list.innerHTML = result;
        }else{
            list.innerHTML = "数据为空……";
        }
    }
</script>
</body>
</html>